<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <style>
        * {
            padding: 0%;
            margin: 0%;
        }

        #upload_wrap {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            box-sizing: border-box;
            padding: 5px;
            width: 25%;
            border: 1px solid green;
        }

        .item img {
            width: 100%;
            height: 100px;
            object-fit: contain;
        }

        .progress {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 0 2px;
            display: flex;
            justify-content: space-between;
        }

        .percent {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .abort {
            width: 40px;
            margin-left: 2px;
        }

        .bar-wrap {
            width: 100%;
        }

        .bar {
            height: 100%;
            display: inline-block;
            background-color: orange;
        }
    </style>
</head>

<body>
    <input type="file" id="fileUp" multiple>
    <div id="upload_wrap">

    </div>
    <!-- 逻辑代码 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.min.js"></script>
    <script src="/js/utils.js"></script>
    <script>
        let fileList = [], isPause = false, cbList = [], maxReq = 6;
        let chunkSize = 2 * 1024 * 1024;
        function request() {
            if (maxReq > 0 && cbList.length) {
                let cb = cbList.shift();
                maxReq--;
                cb().then(data => {
                    console.log(data);
                    maxReq++;
                    request();
                });
            }
        }

        function upload(file, start, els) {
            // 上传
            let fd = new FormData;
            if (start >= file.size) return;
            let end = start + chunkSize;
            if (end > file.size)
                end = file.size;
            fd.append('file', file.slice(start, end));
            let { suffix, fileName } = getFileName(file);
            // 709d1d31dc47636e4f5ccbfd07601c191593337237717.png 
            fd.append('suffix', suffix);
            fd.append('fileName', fileName);
            let { bar, abort, percent } = els;
            let cb = function () {
                return Ajax({
                    path: '/single',
                    data: fd,
                    abort,
                    progress: (e) => {
                        let perNum = Math.floor((start + e.loaded) / file.size * 100);
                        if (perNum >= 80) {
                            bar.style.backgroundColor = 'green';
                        }
                        bar.style.width = (perNum + '%');
                        percent.innerText = (perNum + '%');
                    }
                }).then(res => {
                    upload(file, end + 1, els);
                })
            }
            cbList.push(cb);
            request();
        }
        fileUp.onchange = function () {

            fileList = [...fileUp.files];

            fileList.forEach((file, index) => {

                //生成DOM
                let item = document.createElement('div');
                item.className = 'item';

                //临时链接
                let url = window.URL.createObjectURL(file);
                let img = document.createElement('img');
                img.src = url;

                let progress = document.createElement('div');
                progress.className = "progress";

                let barWrap = document.createElement('div');
                barWrap.className = "bar-wrap";

                let bar = document.createElement('span');
                bar.className = "bar";
                bar.innerText = " ";

                let percent = document.createElement('div');
                percent.className = "percent";
                percent.innerText = "0%";

                let abort = document.createElement('button');
                abort.className = 'abort';
                abort.innerText = "暂停";

                barWrap.appendChild(bar);

                progress.appendChild(barWrap);
                progress.appendChild(percent);
                progress.appendChild(abort);

                item.appendChild(img);
                item.appendChild(progress);

                upload_wrap.appendChild(item);

                //销毁
                img.onload = function () {
                    window.URL.revokeObjectURL(url);
                };

                // File { name: "Snipaste_2019-10-20_16-46-59.png", lastModified: 1571561242257, lastModifiedDate: Sun Oct 20 2019 16: 47: 22 GMT + 0800(澳大利亚西部标准时间), webkitRelativePath: "", size: 43724, … }
                // lastModified: 1571561242257
                // lastModifiedDate: Sun Oct 20 2019 16: 47: 22 GMT + 0800(澳大利亚西部标准时间) { }
                // name: "Snipaste_2019-10-20_16-46-59.png"
                // size: 43724
                // type: "image/png"
                // webkitRelativePath: ""
                // __proto__: File

                upload(file, 0, { bar, abort, percent });
            })
        }

    </script>
</body>

</html>